<template>
  <div class="outer">
    <img src="~/assets/images/home/banner-6.jpg" class="background" alt="" />
    <Container class="wrap-container" bg-color="rgba(61,136,242,0.8)">
      <div class="banner6 common">
        <div class="title">
          <!-- <div class="num">01</div> -->
          <!-- <img class="serial-number" src="" /> -->
          <div class="text white">{{ $t("content.home.banner6.title") }}</div>
          <div class="en color-1">
            {{ $t("content.home.banner6.sub_title") }}
          </div>
        </div>
        <div class="introduce white" v-if="pageData" v-html="pageData"></div>
        <div class="introduce" v-else>
          <div class="pc-skeleton">
            <Skeleton :rows="3"></Skeleton>
          </div>
          <div class="mobile-skeleton">
            <Skeleton :rows="3" mobile></Skeleton>
          </div>
        </div>
        <div class="content" ref="marqueeContainerRef">
          <template v-if="BrandPics">
            <div
              class="swiper-outer"
              v-for="(item, idx) in BrandPics"
              :key="idx"
            >
              <div class="swiper-inner">
                <Vue3Marquee
                  pause-on-hover
                  :direction="idx % 2 == 0 ? '' : 'reverse'"
                >
                  <div class="card" v-for="(inner, index) in item" :key="index">
                    <img :src="inner.single_pic" alt="" />
                  </div>
                </Vue3Marquee>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="swiper-outer skeleton" v-for="i in 3" :key="idx">
              <div class="swiper-inner" :key="i">
                <div class="card" v-for="j in 6" :key="j">
                  <Skeleton width="100%" height="100%"></Skeleton>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </Container>
  </div>
</template>

<script setup lang="ts">
import { Vue3Marquee } from "vue3-marquee";

import { postOnePageQuery } from "../../../api/banner";
import { ref, onBeforeMount, onMounted, onBeforeUnmount } from "vue";
import { postBrandList } from "../../../api/banner";
import { useCacheStore } from "../../../store";
import { create2DArray } from "./create2DArray";

const BrandPics = ref();

const cacheStore = useCacheStore();

// 处理品牌图片
const marqueeContainerRef = ref();

const getBrandData = async () => {
  if (cacheStore.homeData.banner6) {
    BrandPics.value = cacheStore.homeData.banner6;
    return;
  }
  let res = await postBrandList();
  if (res.code === 200) {
    let new_data = create2DArray(res.data);
    BrandPics.value = new_data;
  }
};

const pageData = ref();
const getOnePageData = async () => {
  if (cacheStore.onePageData[5]) {
    pageData.value = cacheStore.onePageData[5];
    return;
  }
  let res = await postOnePageQuery(5);
  if (res.code === 200) {
    pageData.value = res.data;
    cacheStore.onePageData[5] = res.data;
  }
};

Promise.all([getOnePageData(), getBrandData()]);
</script>
<style scoped lang="less">
@import url("./common.less");
@import url("./media-banner6.less");
.outer {
  position: relative;
}
.background {
  z-index: 0 !important;
}
.title,
.introduce {
  text-align: center;
}
.introduce {
  margin-top: 32px;
  margin-bottom: 48px;
}
.card {
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 24px;
  .swiper-outer {
    &:nth-child(3) {
      width: calc(100% + 150px);
      transform: translateX(-150px);
    }
    & > div {
      display: flex;
      position: relative;
      width: 100%;
      .card {
        margin-right: 24px;
      }
    }
    &.skeleton {
      .swiper-inner {
        white-space: nowrap;
        & > div {
          display: inline-block;
          white-space: nowrap;
        }
      }
      &:nth-child(1) {
        transform: translateX(0px);
      }
      &:nth-child(2) {
        transform: translateX(-60px);
      }
      &:nth-child(3) {
        transform: translateX(-150px);
      }
    }
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 100%;
    top: 0;
    z-index: 9;
  }
  &::before {
    left: 0;
    background: linear-gradient(
      90deg,
      rgba(61, 136, 242, 0.8) 0%,
      rgba(61, 136, 242, 0) 100%
    );
  }
  &::after {
    right: 0;
    background: linear-gradient(
      90deg,
      rgba(61, 136, 242, 0) 0%,
      rgba(61, 136, 242, 0.8) 100%
    );
  }
}
</style>
